<template>
  <div class="infinite-container">
    <mu-list class="bgwhite">
      <mu-list-item title="姓名">
        <mu-text-field hintTextClass="text-right" hintText="请输入姓名" v-model="form.realName" slot="right" class="mt10" inputClass="text-right" :disabled="disabled.realName">
        </mu-text-field>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="认证方式">
        <span class="list-right-title">就诊卡</span>
        <i slot="right" class="iconfont icon-small-arrow-right"></i>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="就诊卡号">
        <mu-text-field v-model="form.cardNumber" hintTextClass="text-right" hintText="请输入医院就诊卡号"  slot="right" class="mt10" inputClass="text-right" :disabled="disabled.cardNumber">
        </mu-text-field>
      </mu-list-item>
      <mu-divider></mu-divider>

    </mu-list>

    <mu-flexbox :gutter="0" style="margin-top:4em;" v-if="!canDelete">
      <mu-flexbox-item grow="2"></mu-flexbox-item>
      <mu-flexbox-item grow="16">
        <mu-raised-button class="submit-btn" label="保存" @click="submitForm" fullWidth primary></mu-raised-button>
      </mu-flexbox-item>
      <mu-flexbox-item grow="2"></mu-flexbox-item>
    </mu-flexbox>
  
  <mu-flexbox :gutter="0" style="margin-top:4em;" v-if="canDelete">
    <mu-flexbox-item grow="2"></mu-flexbox-item>
    <mu-flexbox-item grow="16">
      <mu-raised-button class="btn-login"  @click="removeCard" label="删除就诊卡" fullWidth secondary></mu-raised-button>
    </mu-flexbox-item>
    <mu-flexbox-item grow="2"></mu-flexbox-item>
  </mu-flexbox>

      
  </div>
</template>

<script>
import {testEmpty} from '../../common/js/util.js'
import {commonAjax} from '../../api/api'
export default {
  name: 'message',
  data () {
    return {
      person: JSON.parse(localStorage.person || '{}'),
      form: {
        cardNumber: '',
        realName: ''
      },
      disabled: {
        realName: false,
        cardNumber: false
      },
      canDelete: false
    }
  },
  mounted () {
    let query = this.$route.query
    if (!query.fid) {
      // todo: self
      if (this.person.outpatientCardNo) {
        this.form.cardNumber = this.person.outpatientCardNo || ''
        this.canDelete = true
      }
      this.form.realName = this.person.realname || ''
      this.disabled.realName = !!this.person.outpatientCardNo
      this.disabled.cardNumber = !!this.person.outpatientCardNo
    } else {
      // todo: family
      if (query.outpatientCardNo) {
        this.form.cardNumber = query.outpatientCardNo || ''
        this.canDelete = true
      }
      this.form.realName = query.realname || ''
      this.disabled.realName = !!query.outpatientCardNo
      this.disabled.cardNumber = !!query.outpatientCardNo
    }
  },
  methods: {
    submitForm () {
      if (testEmpty(this.form.realName)) {
        this.$store.commit('UPDATE_TOAST', {
          message: '请填写您的真实姓名'
        })
        return false
      }
      if (testEmpty(this.form.cardNumber)) {
        this.$store.commit('UPDATE_TOAST', {
          message: '请填写您的就诊卡号'
        })
        return false
      }
      // xhr start
      let personJson = {
        fid: this.$route.query.fid || '',
        cardtype: 1,
        cardnum: this.form.cardNumber,
        openid: this.person.openid
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax('user/addCard', personJson).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.$store.commit('UPDATE_TOAST', {
            message: '保存成功',
            fn: () => this.$router.push(`/login?openId=${localStorage.openId}`)
          })
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_TOAST', {message: res})
      })
    },
    removeCard () {
      // todo
      let cid = this.form.cardNumber
      let openid = this.person.openid
      commonAjax('user/removeCard', {cid, openid}).then(res => {
        if (res.data.code === 1) {
          this.$store.commit('UPDATE_TOAST', {
            message: '操作成功',
            fn: () => this.$router.replace(`/login?openId=${openid}`)
          })
        }
      })
    }
  }
}
</script>
<style lang="less">
.list-right-title {
  position:absolute;
  right:2.5em;
  top:.9em;
  color: #999;
}
</style>

